<template>
  <div class="salarys-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        工资管理
        <hr>
        <!-- v-model 双向绑定指令, 就是一个语法糖, 本质做了两件事
          1. 给子组件 动态绑定一个 value属性, 一个变量
          2. 给子组件 绑定一个 input 事件, 在处理函数中给变量赋值 -->
        <son :value="count" @input="val=>count=val" />
        <son v-model="count2" />

        <!-- .sync 修饰符
            因为 v-model 在1个组件或标签上 只能使用1次
            .sync 就很好地解决了这个问题 其原理和v-model极其类似

            区别:
          1. v-model 在标签上只能绑1个, 属性名.sync可以绑定绑定多个
          2. v-model 用的属性名是 value , 事件名是input , 这两个是固定的,
             而 .sync 用的属性名是可以自定义的 , 事件名 update:属性名

          其实.sync 就让我们少写了 事件处理函数 @update:count="val=>count=val"
              -->
        <sonSync :count="count" @update:count="val=>count=val" />
        <sonSync :count.sync="count" />
      </el-card>
    </div>
  </div>
</template>

<script>
import son from './son.vue'
import sonSync from './sonSync.vue'
export default {
  components: {
    son,
    sonSync
  },
  data() {
    return {
      count: 0,
      count2: 2
    }
  }
}
</script>
